<!--
 * @Descripttion: 
 * @version: 
 * @Author: cyj
 * @Date: 2022-12-09 22:23:25
-->
<template>
    <div class="songList" @click="click(item)">
        <!-- 歌单图片 -->
        <div class="item-img" @mouseenter="showIcon" @mouseleave="closeIcon">
            <img v-lazy="imgURL" alt="">
            <transition enter-active-class="animate__animated animate__fadeIn"
                leave-active-class="animate__animated animate__fadeOut">
                <div class="mask-playicon" v-show="isPlayIcon">
                    <span class="iconfont icon-shipinbofangshibofang"></span>
                </div>
            </transition>

            <!-- 遮罩层 显示播放量-->
            <transition leave-active-class="animate__animated animate__fadeOutUp"
                enter-active-class="animate__animated animate__fadeInDown">
                <div class="mask1" v-show="isShowIcon">
                    <span class="iconfont icon-24gl-playCircle"></span>
                    <!-- 使用自定义插件 —— 格式化数字 -->
                    <span class="playNum">{{ instance.proxy.$formatNums.formatNum(item.playCount) }}</span>
                </div>
            </transition>
        </div>
        <!-- 歌单描述 -->
        <div class="item-info">{{ item.name }}</div>
    </div>
</template>

<script setup>
import 'animate.css';
import { getCurrentInstance, ref, computed } from 'vue'
import { useRouter } from 'vue-router'
defineProps({
    item: {
        type: Object,
        default: {}
    }
})
const instance = getCurrentInstance()
let isShowIcon = ref(true)
let isPlayIcon = ref(false)

const router = useRouter()

//使用计算属性
let imgURL = computed(() => {
    return instance.props.item.coverImgUrl || instance.props.item.picUrl
})

function showIcon() {
    isShowIcon.value = false
    isPlayIcon.value = true
}
function closeIcon() {
    isShowIcon.value = true
    isPlayIcon.value = false
}

//点击跳转到歌单详情页
function click(item) {
    router.push({
        name:'Songlistdetail',
        params:{
            id:item.id
        }
    })
}

</script>

<style lang="scss" scoped>
.songList {
    position: relative;
}

.item-img {
    position: relative;
    height: 180px;

    img {
        height: 100%;
        width: 100%;
    }
}

.item-info {
    width: 200px;
    margin-top: 5px;
    overflow: hidden;
    text-overflow: ellipsis;
}

// 遮罩层
.mask1 {
    // pointer-events: none;
    position: absolute;
    display: flex;
    align-items: center;
    top: 5px;
    right: 5px;
    color: white;

    .playNum {
        margin-left: 5px;
    }
}

.icon-play {
    font-size: 30px;
    padding-left: 0px;

}
</style>